<!-- 统计图以及图层树组件 -->
<template>
  <div class="count-component">
    <el-tabs v-model="activeName" class="self-tabs">
      <el-tab-pane label="统计图" name="统计图">
        <section-one></section-one>
        <section-two></section-two>
      </el-tab-pane>
      <el-tab-pane label="图层树" name="图层树">
        <tree-of-l1></tree-of-l1>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {
  defineComponent,
  onBeforeUnmount,
  onMounted,
  onUnmounted,
  reactive,
  toRefs
} from 'vue';
import SectionOne from './SectionOne.vue';
import SectionTwo from './SectionTwo.vue';
import SectionThree from './SectionThree.vue';
import SectionFour from './SectionFour.vue';
import TreeOfL1 from './TreeOfL1.vue'
export default defineComponent({

  name: 'CountAndTreeComponent',
  props: {},
  components: { SectionTwo, SectionOne, TreeOfL1, SectionThree, SectionFour },
  setup(props, { attrs, slots, emit }) {
    const state = reactive({
      activeName: "统计图",
    })
    onMounted(() => {
    });
    //释放资源
    onBeforeUnmount(() => {
    });
    onUnmounted(() => {
    })
    return {
      ...toRefs(state),
    };
  }
});
</script>
<style lang="less" scoped>
.count-component {
  width: 100%;
  height: 100%;
}
</style>
<style>
.self-tabs {
  flex: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.self-tabs .el-tabs__nav-wrap:after {
  height: 1px;
  background-color: rgb(66, 244, 255);
}

.self-tabs .el-tabs__content {
  flex-grow: 1;
  overflow-y: auto;
}

.self-tabs .el-tabs__item {
  font-size: 18px;
  font-weight: bolder;
  width: 90px;
  padding: 0;
}
</style>